<template>
  <div v-loading="pageLoad" style="font-size: 12px">
    <div style="display: flex; justify-content: space-between">
      <h3 style="margin-top: 20px; margin-left: 10px">订单详情</h3>
      <el-button
        style="height: 30px; margin-top: 20px; margin-right: 10px"
        @click="goBack"
      >
        返回
      </el-button>
    </div>
    <div>
      <div style="margin-left: 10px">
        <span>订单编号：{{ dataList.order_sn }}</span>
        <span style="margin-left: 20px">
          下单时间：{{ dataList.created_at }}
          <span v-if="dataList.payment_method == 'alipay'">支付宝</span>
        </span>
      </div>
      <div style="display: flex">
        <div style="margin-left: 10px">
          <el-card class="box-card" style="width: 500px; margin-top: 40px">
            <div style="font-size: 12px">
              <div v-if="dataList.ord_status == 'wait'">待结算</div>
              <div v-if="dataList.ord_status == 'delivered'">已发货</div>
              <div v-if="dataList.ord_status == 'complete'">订单完成</div>
              <div v-if="dataList.ord_status == 'cancel'">订单关闭</div>
              <div v-if="dataList.ord_status == 'aftersale'">售后处理中</div>
              <div v-if="dataList.ord_status == 'alreadypaid'">已付款</div>
            </div>

            <!-- <div style="margin-top: 10px" type="text">
              {{ dataList.ord_remark }}
            </div> -->
            <br />
            <div>
              <el-button
                v-if="dataList.ord_status == 'alreadypaid'"
                v-permissions="{ permission: ['order-send:OrderList'] }"
                type="primary"
                @click="deliverGoods"
              >
                去发货
              </el-button>
              <el-button
                v-if="dataList.ord_status == 'wait'"
                v-permissions="{ permission: ['order-send:OrderList'] }"
                type="primary"
                @click="settlement"
              >
                去支付
              </el-button>
            </div>
          </el-card>
        </div>
        <div style="width: 50%; margin: 60px 0 0 20px">
          <el-steps :active="stare" align-center>
            <el-step description="" title="买家下单" />
            <el-step description="" title="买家付款" />
            <el-step description="" title="商家发货" />
            <el-step description="" title="交易成功" />
          </el-steps>
        </div>
      </div>

      <div style="margin-left: 15px; margin-top: 10px">
        <el-descriptions class="margin-top" :column="4" title="买家信息">
          <template slot="extra">
            <el-button
              id="copy"
              data-clipboard-action="copy"
              :data-clipboard-text="mes"
              size="small"
              style="margin-right: 10px"
              type="primary"
              @click="copy"
            >
              复制
            </el-button>
          </template>
          <el-descriptions-item
            label="收货人"
            :label-style="{ 'font-size': '12px' }"
          >
            <div class="fontSize">{{ dataList.ord_cons || '-' }}</div>
          </el-descriptions-item>
          <el-descriptions-item
            label="联系电话"
            :label-style="{ 'font-size': '12px' }"
          >
            <div class="fontSize">{{ dataList.ord_tel || '-' }}</div>
          </el-descriptions-item>
          <el-descriptions-item
            label="收货地址"
            :label-style="{ 'font-size': '12px' }"
          >
            <div class="fontSize">
              {{ dataList.province_name }} {{ dataList.city_name }}
              {{ dataList.region_name }} {{ dataList.address || '-' }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item
            label="配送方式"
            :label-style="{ 'font-size': '12px' }"
          >
            <div class="fontSize">-</div>
          </el-descriptions-item>
          <el-descriptions-item
            label="实付金额"
            :label-style="{ 'font-size': '12px' }"
          >
            <div class="fontSize">{{ dataList.pay_amount }}</div>
          </el-descriptions-item>
          <el-descriptions-item
            label="付款时间"
            :label-style="{ 'font-size': '12px' }"
          >
            <div class="fontSize">{{ dataList.payment_at }}</div>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="margin-top" :column="4">
          <el-descriptions-item
            label="买家信息"
            :label-style="{ 'font-size': '12px' }"
          >
            <div class="fontSize">
              {{ dataList.customer_name }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item
            label="买家手机号"
            :label-style="{ 'font-size': '12px' }"
          >
            <div class="fontSize">
              {{ dataList.customer_tel }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item
            label="买家留言"
            :label-style="{ 'font-size': '12px' }"
          >
            <div class="fontSize">-</div>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="margin-top" :column="4">
          <el-descriptions-item
            label="买家备注"
            :label-style="{ 'font-size': '12px' }"
          >
            <div class="fontSize">
              {{ dataList.customer_remark }}
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div class="ml">
      <el-table
        border
        :data="dataList.order_item"
        :row-class-name="getRowClass"
        style="width: 100%"
        tooltip-effect="dark"
      >
        >
        <el-table-column type="expand">
          <template v-if="props.row.card_data.length > 0" slot-scope="props">
            <div style="width: 95%; margin-left: 5%">
              <el-table
                ref="multipleTable"
                :data="props.row.card_data"
                row-key="id"
              >
                >
                <el-table-column label="商品卷码" prop="card_sn" />
                <el-table-column label="核销时间" prop="expire_type">
                  <template slot-scope="scoped">
                    <div v-if="scoped.row.verify_status == 'wait_verify '">
                      {{ '' }}
                    </div>
                    <div v-else>
                      {{ scoped.row.updated_at }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="有效期" prop="expire_type">
                  <template slot-scope="scoped">
                    <div v-if="scoped.row.expire_type == 'long_at'">
                      {{ scoped.row.expire_type_name }}
                    </div>
                    <div v-else>
                      {{ scoped.row.start_at }} - {{ scoped.row.expire_at }}
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="核销人" prop="user_name" />
                <el-table-column label="核销状态" prop="verify_status_name" />
                <el-table-column label="状态" prop="status_name" />
                <el-table-column label="操作">
                  <template slot-scope="scoped">
                    <el-button
                      v-if="scoped.row.verify_status != 'already_verify'"
                      type="text"
                      @click="card_sn(scoped)"
                    >
                      核销
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品" prop="goods_name" />
        <el-table-column label="单价" prop="item_price" />
        <el-table-column label="数量" prop="item_qty" />
        <el-table-column label="优惠" prop="discount_fee" />
        <el-table-column label="小计" prop="total_amount" />
        <el-table-column label="售后" prop="shzt">
          <template slot-scope="scoped">
            <div v-if="scoped.row.item_status == 'delivered' || 'complete'">
              <el-button
                v-permissions="{ permission: ['order-apply:OrderList'] }"
                :disabled="staret"
                type="text"
                @click="afterSale(scoped.row)"
              >
                申请售后
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="发货状态" prop="item_status">
          <template slot-scope="scoped">
            <div v-if="scoped.row.item_status == 'wait'">待结算</div>
            <div v-if="scoped.row.item_status == 'delivered'">已发货</div>
            <div v-if="scoped.row.item_status == 'complete'">订单完成</div>
            <div v-if="scoped.row.item_status == 'cancel'">订单关闭</div>
            <div v-if="scoped.row.item_status == 'aftersale'">售后处理中</div>
            <div v-if="scoped.row.item_status == 'alreadypaid'">待发货</div>
          </template>
        </el-table-column>
      </el-table>
      <div></div>
    </div>

    <!-- 售后 -->

    <el-dialog
      :before-close="handleClose"
      title="申请售后"
      :visible.sync="afterSaleDialogVisible"
      width="80%"
    >
      <el-select v-model="after_type" placeholder="请选择售后类型">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model="after_remark"
        maxlength="30"
        placeholder="请输入退款说明"
        show-word-limit
        style="margin-top: 10px"
        type="textarea"
      />

      <el-table :data="afterSaleTableData" style="width: 100%">
        <el-table-column label="商品" prop="goods_name" />
        <el-table-column label="商品数量" prop="item_qty" width="100" />
        <el-table-column label="可退款数量" prop="refund_qty" width="100" />
        <el-table-column label="可退款金额" prop="refund_amount" width="100" />
        <el-table-column label="商品单价" prop="pay_amount" width="100" />
        <el-table-column label="退款数量" prop="date">
          <template slot-scope="scoped">
            <el-input-number
              v-model="afterSaleNum"
              label="描述文字"
              :max="scoped.row.refund_qty"
              :min="0"
              @change="numberChange(scoped.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="退款金额(元)" prop="date">
          <template slot-scope="scoped">
            <el-input
              v-model="afterSaleInput"
              placeholder="请输入退款金额"
              @keyup.enter.native="handleClicks(scoped.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="原因" prop="date">
          <template slot-scope="scoped">
            <el-input
              v-model="reasonInput"
              placeholder="请输入原因"
              @keyup.enter.native="handleClicks(scoped.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="afterSaleDialogVisible = false">取 消</el-button>
        <el-button
          :disabled="disabledshow"
          type="primary"
          @click="afterSaleDialogClick(afterSaleTableData)"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
    <!-- 发货 -->
    <el-dialog
      :before-close="handleClose"
      title="发货"
      :visible.sync="dialogVisible"
    >
      <el-table
        ref="multipleTable"
        :data="orderItemData"
        style="width: 100%"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="商品" prop="goods_name" />
        <el-table-column label="数量" prop="item_qty" />
        <!-- <el-table-column label="状态" prop="item_status" show-overflow-tooltip>
          <template slot-scope="scoped">
            <div v-if="scoped.row.item_status == 'wait'">待结算</div>
            <div v-if="scoped.row.item_status == 'delivered'">已发货</div>
            <div v-if="scoped.row.item_status == 'complete'">订单完成</div>
            <div v-if="scoped.row.item_status == 'cancel'">订单关闭</div>
            <div v-if="scoped.row.item_status == 'aftersale'">售后处理中</div>
          </template>
        </el-table-column> -->
      </el-table>
      <div style="display: flex">
        <div style="margin-top: 13px; margin-right: 15px">配送信息</div>
        <div>
          <p>配送方式：快递</p>
          <p>收货人：{{ dataList.ord_cons }} {{ dataList.ord_tel }}</p>
          <p>
            收货地址：{{ dataList.province_name }} {{ dataList.city_name }}
            {{ dataList.region_name }} {{ dataList.address }}
          </p>
        </div>
      </div>
      <div>
        <span>选择快递</span>
        <el-select
          v-model="expressValue"
          filterable
          placeholder="请选择快递"
          style="margin-left: 10px"
          @change="expressCheng"
        >
          <el-option
            v-for="item in expressOptions"
            :key="item.id"
            :label="item.express_name"
            :value="item.id"
          />
        </el-select>
        <span>
          <el-input
            v-model="form.express_sn"
            placeholder="请输入快递单号"
            style="width: 250px"
          />
        </span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendOrderClick">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 结算 -->
    <el-dialog title="结算" :visible.sync="jsdialogVisible">
      <div>
        <!-- 标签页 -->
        <div style="margin: 0 auto 20px; width: fit-content">
          <!-- 付款标签页 -->
          <el-radio-group v-model="tabPosition" @change="groupChange">
            <el-radio-button
              v-for="(item, index) of settleHead"
              :key="index"
              :label="item"
            >
              {{ item }}
            </el-radio-button>
          </el-radio-group>
        </div>
        <!-- 付款方式 -->
        <div style="text-align: center">
          <div style="font-size: 12px">
            应收金额：￥ {{ dataList.pay_amount }}
          </div>
          <!-- pos机收款 -->

          <div
            v-show="tabPosition == 'pos机收款'"
            class="flex_center"
            style="margin: 20px auto"
          >
            <div class="flex_center" style="padding: 50px">
              <div>
                <!-- <img class="img_cls" :src="srcCode" /> -->
                <div v-html="srcPos"></div>
                <div style="margin-top: 10px; color: rgba(0, 0, 0, 0.5)">
                  使用POS机扫描二维码
                </div>
              </div>
            </div>
          </div>
          <!-- 余额收款 -->
          <div
            v-show="tabPosition == '余额收款'"
            class="flex_center"
            style="margin: 20px auto"
          >
            <el-input placeholder="请输入余额收款金额" style="width: 25%" />
            <div style="width: 10px"></div>
            <el-button type="primary">确认</el-button>
          </div>
          <!-- 扫码收款 -->
          <div v-show="tabPosition == '扫码收款'" style="margin: auto">
            <div class="flex_center" style="padding: 50px">
              <img class="img_cls" src="@/assets/public/scan-code.jpg" />
            </div>
            <el-input
              ref="mark"
              v-model="receivePayment"
              show-password
              style="width: 35%"
              true
              @keyup.enter.native="handleClick(receivePayment)"
            />
          </div>
          <div v-show="tabPosition == '储值收款'" style="margin: auto"></div>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="card_sn_dialogVisible" width="30%">
      <el-input v-model="card_sn_input" clearable placeholder="请输入内容" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="card_sn_dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="card_sn_subt(card_sn_input)">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    orderDetail,
    expressList,
    sendOrder,
    createAfter,
    customerCardCheck,
  } from '@/api/order'
  import { paymentDa, getQrCode } from '@/api/public'
  export default {
    props: {
      orderid: {
        type: Number,
        required: true,
      },
    },
    data() {
      return {
        pageLoad: false, // 页面加载样式
        afterSaleInput: '',
        reasonInput: '',
        afterSaleNum: 0,
        orderItemData: [],
        barcode: '',
        receivePayment: '',
        jsdialogVisible: false,
        afterSaleDialogVisible: false,
        stare: 0,
        expressValue: '',
        expressOptions: [],
        dialogVisible: false,
        card_sn_dialogVisible: false,
        card_sn_input: '',
        orderState: 0, // 0,已支付 ， 1，未支付 ， 2,核销
        mes: '',
        srcPos: 'https://s3.bmp.ovh/imgs/2022/01/c884add311986b50.jpg',
        srcCode: '@/assets/error_images/403.jpg', // 扫码支付图片
        dataList: {},
        settleHead: ['余额收款', 'pos机收款', '扫码收款', '储值收款'],
        tabPosition: '余额收款',
        send: [],
        form: {
          express_sn: '',
        },
        afterSaleTableData: [],
        staret: true,
        disabledshow: false,
        after_type: '',
        after_remark: '',
        options: [
          {
            value: 'only_refund',
            label: '仅退款',
          },
          {
            value: 'return_goods',
            label: '仅退货',
          },
          {
            value: 'exchange_goods',
            label: '换货',
          },
        ],
      }
    },
    watch: {},

    created() {
      this.pageLoad = true
      const data = {
        order_id: this.orderid,
      }
      orderDetail(data).then((e) => {
        this.dataList = e.data
        const a = {
          order_sn: e.data.order_sn,
        }
        getQrCode(a).then((e) => {
          this.srcPos = e
        })
        if (e.data.ord_status == 'wait') {
          this.stare = 1
          this.staret = true
        }
        if (e.data.ord_status == 'alreadypaid') {
          this.stare = 2
          this.staret = false
        }
        if (e.data.ord_status == 'delivered') {
          this.stare = 3
          this.staret = false
        }
        if (e.data.ord_status == 'complete') {
          this.stare = 4
          this.staret = false
        }
        const arr = []
        e.data.order_item.forEach((j) => {
          if (j.item_status == 'alreadypaid') {
            arr.push(j)
          }
        })
        this.orderItemData = arr
        this.pageLoad = false
      })
      expressList().then((res) => {
        this.expressOptions = res.data
      })
    },

    methods: {
      getRowClass(row) {
        // children 是你子项的数组 key
        if (row.row.card_data.length === 0) {
          // 公共css 样式里的
          return 'row-expand-cover'
        }
      },

      // input 回车事件
      handleClick(e) {
        const data = {
          channel_type: 'order',
          mode: 'pay_scan',
          authcode: e,
          order_sn: this.dataList.order_sn,
        }
        paymentDa(data).then((j) => {
          if (j.code == '200') {
            this.jsdialogVisible = false
            this.tabPosition = '扫码收款'
            this.receivePayment = ''
            this.$message({
              showClose: true,
              message: '支付成功',
            })
          } else {
            this.$message({
              showClose: true,
              message: '支付失败',
              type: 'error',
            })
          }
        })
      },

      groupChange(e) {
        if (e == '扫码收款') {
          this.$refs['mark'].focus()
        }
      },
      // 发货
      sendOrderClick() {
        this.form.order_item_id = JSON.stringify(this.send)
        this.form.order_id = this.orderid
        sendOrder(this.form)
          .then(() => {
            this.dialogVisible = false
            this.$message({
              message: '成功',
              type: 'success',
            })
          })
          .catch(() => {
            this.$message.error('失败')
          })
      },
      // 复制
      copy() {
        this.mes =
          this.dataList.ord_cons +
          this.dataList.ord_tel +
          this.dataList.province_name +
          this.dataList.city_name +
          this.dataList.region_name +
          this.dataList.address
        let textUrl = new this.clipboard('#copy')
        textUrl.on('success', () => {
          this.$message({
            message: '复制成功',
            type: 'success',
          })
          textUrl.destroy()
        })

        textUrl.on('error', function (e) {
          this.$message.error('复制失败')
          e.clearSelection()
          textUrl.destroy()
        })
      },
      // 发货
      deliverGoods() {
        this.dialogVisible = true
      },
      // 结算
      settlement() {
        this.jsdialogVisible = true
      },
      // 发货选择商品
      handleSelectionChange(val) {
        const arr = []
        val.forEach((j) => {
          arr.push({ id: j.id })
        })
        this.send = arr
      },
      // 快递
      expressCheng(e) {
        this.form.express_id = e
      },
      // 计数器
      numberChange(e) {
        const a = e.pay_amount * this.afterSaleNum
        this.afterSaleInput = a
      },
      afterSaleDialogClick(e) {
        if (e[0].total_amount >= this.afterSaleInput && this.afterSaleNum > 0) {
          const adte = {
            after_remark: this.after_remark,
            order_id: this.orderid,
            order_item_id: e[0].id,
            refund_qty: this.afterSaleNum,
            refund_amount: this.afterSaleInput,
            refund_reason: this.reasonInput,
            after_type: this.after_type,
          }
          createAfter(adte).then(() => {
            this.$message({
              message: '操作成功',
              type: 'success',
            })
            this.afterSaleDialogVisible = false
          })
        } else {
          this.$message.error('退款金额，不可大于总金额')
        }
      },
      // 申请售后

      afterSale(e) {
        if (e.refund_amount == 0) {
          this.disabledshow = true
        }

        this.afterSaleTableData = []
        this.afterSaleTableData.push(e)
        this.afterSaleDialogVisible = true
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done()
          })
          .catch(() => {})
      },
      goBack() {
        this.$emit('showMain', 0)
      },
      card_sn(e) {
        console.log(e)
        this.card_sn_dialogVisible = true
      },
      card_sn_subt(e) {
        const data = {
          card_sn: e,
        }
        customerCardCheck(data).then(() => {
          this.card_sn_dialogVisible = false
          this.init()
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .fontSize {
    font-size: 12px;
  }
  .img_cls {
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }
  .padding_15 {
    padding: 15px;
  }
  .right {
    float: right;
  }
  .flex_y_center {
    display: flex;
    align-items: center;
  }
  .flex_between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .flex_center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .flex_dir_between {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
  .grid_7_column {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 15px;
  }
  .grid_3_column {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;
  }
  .grid_4_column {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
  .line_2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .goods_item {
    background-color: lightblue;
    padding: 10px;
    cursor: pointer;
    transition: 0.5s;
  }
  .mark_payment {
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    display: flex;
    align-items: center;
  }
  input[type='password']::-ms-reveal {
    display: none;
  }
</style>
